<template>
  <view class="store" @click="enterShop(props.data.id)">
    <view class="icon" :style="{ border: '2px solid ' + reputationColorOf(props.data.reputation) }">
      <span
        class="brand"
        v-if="props.data.reputation != null"
        :style="{ background: reputationColorOf(props.data.reputation) }"
        >{{ reputationLabelOf(props.data.reputation) }}</span
      >
      <img :src="props.data.logo" class="icon-img" />
    </view>
    <view class="store-info">
      <view class="first-line">
        <span class="store-name">{{ props.data.name }}</span>
        <span class="bookable-flag" v-if="props.data.bookable != null">
          <span>可预定</span>
          <span v-if="props.data.bookable != ''"> {{ props.data.bookable }}后配送</span>
        </span>
      </view>
      <view class="info">
        <span
          >月售: {{ data.statistical?.monthlySoldQuantity == null ? '--' : data.statistical.monthlySoldQuantity }}
        </span>
        <span
          >评分:
          <span class="scope">{{
            data.statistical?.score == null ? '--' : data.statistical.score.toFixed(1)
          }}</span></span
        >
        <span>距离: {{ props.data.distance.toFixed(1) }}km</span>
        <span class="delivery-method" :style="deliveryMethodStyleOf(props.data.deliveryMethod)">
          {{ deliveryMethodLabelOf(props.data.deliveryMethod) }}</span
        >
      </view>
      <view class="shop-label">
        <span class="label-item" v-for="(flag, index) in props.data.flags.split(',')" :key="index">{{ flag }}</span>
      </view>
      <p class="shop-notice"><uni-icons type="sound" size="22" color=""></uni-icons>{{ props.data.notice }}</p>
      <view class="product-box">
        <div class="product-rol-box">
          <view
            v-for="(dish, index) in props.data.dishList"
            :key="index"
            class="product"
            @click.stop="enterShop(dish.shopId, dish.id)"
          >
            <view>
              <img :src="dish.image" class="product-icon" />
            </view>
            <view>
              <span class="price">{{ dish.nowPrice }}元</span>
              <span class="old-price">{{ dish.oldPrice }}元</span>
            </view>
          </view>
        </div>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { NearbyShop } from '@/types/response/shop'
import enterShop from '@/common/function/enterShop'
import { reputationColorOf, reputationLabelOf } from '@/enum/ReputationMap'
import { deliveryMethodLabelOf, deliveryMethodStyleOf } from '@/enum/DeliveryMethod'
let props = defineProps({
  data: {
    type: Object as () => NearbyShop,
    default: {} as NearbyShop
  }
})
</script>

<style scoped lang="scss">
$shop-width: 710rpx;
$shop-margin-size: 20rpx;
$shop-padding-size: 20rpx;
$shop-icon-size: 190rpx;
$shop-icon-margin-right: 20rpx;
$shop-describe-width: ($shop-width - $shop-margin-size * 2 - $shop-icon-size - $shop-icon-margin-right);

.store {
  display: flex;
  margin: 0 $shop-margin-size $shop-margin-size;
  padding: $shop-padding-size;
  width: $shop-width;
  border-radius: 10px;
  background-color: #fff;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.icon {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: 20rpx;
  margin-right: $shop-icon-margin-right;
  width: $shop-icon-size;
  height: $shop-icon-size;
  border-radius: 20rpx;

  .brand {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0rpx 12rpx 0;
    height: 38rpx;
    font-size: 25rpx;
    text-align: center;
    color: #fff;
    line-height: 38rpx;
    border-bottom-right-radius: 15rpx;
  }

  .icon-img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}

.store-info {
  // 占用全部的多余空间
  flex-grow: 3;

  .first-line {
    display: flex;
    align-items: center;

    .store-name {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 60rpx;
    }

    .bookable-flag {
      display: inline-block;
      margin: 0rpx 10rpx;
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      border-radius: 7rpx;
      color: #fff;
      background-color: #fe7f05;
    }
  }

  .shop-label {
    /* 超出省略号 */
    overflow: hidden;
    width: $shop-describe-width;

    .label-item {
      display: inline-block;
      margin: 2px;
      padding: 5rpx 8rpx;
      font-size: 25rpx;
      border-radius: 10rpx;
      color: #f48330;
      background-color: #feeddd;
    }
  }

  .shop-notice {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: $shop-describe-width;
    font-size: 25rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-wrap: nowrap;
    color: rgb(31 31 31);
  }
}

.info {
  display: flex;
  justify-content: space-between;
  font-size: 25rpx;
  line-height: 40rpx;
  color: #666;
}

.delivery-method {
  display: inline-block;
  padding: 3rpx 12rpx;
  line-height: 36rpx;
  height: 36rpx;
  font-size: 21rpx;
  border: 1px solid #9a9a9a;
  border-radius: 5px;
  text-align: center;
  color: #9a9a9a;
}

.platform_delivery {
  border: none;
  color: black;
  background-color: #ffd930;
}

.scope {
  font-weight: 700;
  color: #f78608;
}

.product-box {
  overflow-x: auto;
  margin-top: 15rpx;
  width: 440rpx;
  border-radius: 15rpx;
  box-sizing: border-box;
}

.product-box::-webkit-scrollbar {
  display: none;
}

.product-rol-box {
  display: inline-flex;
  overflow-x: auto;

  /* 实现x轴实现的重要css */
  white-space: nowrap;
}

.product {
  padding-right: 20rpx;
}

.product-icon {
  width: 150rpx;
  height: 110rpx;
  border-radius: 15rpx;
  background-color: #f5f5f5;
}

.old-price {
  font-size: 20rpx;
  text-decoration: line-through;
}

.price {
  margin-right: 4rpx;
  font-size: 25rpx;
  font-weight: 600;
  color: #f74c2e;
}
</style>
